import React, {useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {Button, message, Popconfirm, Switch} from 'antd';
import {PlusOutlined,EditOutlined} from '@ant-design/icons';
import {delDepartment, getDepartmentList, lockDepartment} from '@/services/departments';
import CreateOrEdit from '@/pages/Departments/components/CreateOrEdit'
import GetTime from '@/components/GetTime'

const Departments = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [resData, setResData] = useState([]);
  const [id, setid] = useState(undefined);
  const actionRef = useRef();

  /**
   * 控制添加按钮的显示和隐藏
   * @param show
   */
  const isShowModal = (show,id=undefined) => {
    setid(id)
    setIsModalVisible(show);
  };

  /**
   * 获取用部门列表数据
   */
  const getData = async (params) => {
    let response = await getDepartmentList(params);
    let res = response.data;
    setResData(res)
    return {
      data: response.data,
    };
  };

  /**
   * 禁用和启用
   */
  const handleLockDepartment = async (uid) => {
    const response = await lockDepartment(uid);
    if (response.status === undefined) {
      message.success('修改成功');
    }
  };

  /**
   * 删除部门
   */
  const del = async (uid) => {
    const response = await delDepartment(uid);
    console.log(response.status);
    if (response.status === undefined) {
      message.success('删除成功');
      actionRef.current.reload();
    }
  };

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width:'45%'
    },
    {
      title: '部门名称',
      dataIndex: 'name',
      width:'20%'
    },

    {
      title: '是否禁用',
      dataIndex: 'status',
      width:'20%',
      render: (_, record) => (
        <Switch
          key="status"
          checkedChildren="启用"
          unCheckedChildren="禁用"
          defaultChecked={record.status === 0}
          onChange={async () => handleLockDepartment(record.id)}
        />
      ),
    },
    {
      title: '操作',
      width:'15%',
      render: (_, record) => [
        <Button
          key="option"
          type="primary"
          size={'small'}
          onClick={() => isShowModal(true, record.id)}
          style={{marginRight: '10px'}}
        >
          编辑
        </Button>,

        <Popconfirm
          key={2}
          title="确定要删除吗?"
          onConfirm={() => del(record.id)}
          onCancel={() => {
            message.error('已取消')
          }}
          okText="Yes"
          cancelText="No"
        >
          <Button
            type="danger"
            key={5}
            size={'small'}
            style={{marginRight: '10px'}}
          >
            刪除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageContainer header={{
      extra: [
        <GetTime key="getTime"/>
      ]
    }}>
      <ProTable
        actionRef={actionRef}
        columns={columns}
        request={(params = {}) => getData(params)}
        rowKey="id"
        search={false}
        form={{
          ignoreRules: false,
        }}
        pagination={false}
        dateFormatter="string"
        headerTitle="高级表格"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined/>}
            type="primary"
            onClick={() => {
              isShowModal(true);
            }}
          >
            添加部门
          </Button>,
        ]}
      />

      {!isModalVisible ? (
        ''
      ) : (
        <CreateOrEdit
          isModalVisible={isModalVisible}
          isShowModal={isShowModal}
          actionRef={actionRef}
          resData={resData}
          id={id}
        />
      )}
    </PageContainer>
  );
};

export default Departments;
